<template>
  <el-dialog
    v-model="visible"
    title="选择商品"
    :width="'40%'"
    :before-close="handleClose"
  >
    <section>
      <header>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-input
              v-model="goodsName"
              placeholder="输入商品名称模糊搜索"
            ></el-input
          ></el-col>
          <!-- <el-col :span="8">
            <el-button type="primary" @click="search">搜索</el-button>
          </el-col> -->
        </el-row>
      </header>
      <el-table
        border
        :data="goodsList2"
        :max-height="400"
        :min-height="200"
        style="margin-top: 20px"
      >
        <el-table-column
          prop="goods_id"
          label="商品ID"
          width="80"
        ></el-table-column>
        <el-table-column prop="goods_name" label="商品名称"></el-table-column>
        <el-table-column prop="bound" label="是否已绑定" width="120">
          <template #default="scope">
            {{ scope.row.bound ? "已绑定" : "未绑定" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button
              type="primary"
              @click="FnChoose(scope.row)"
              v-if="goods.goods_id != scope.row.goods_id"
              >选择</el-button
            >
            <el-button type="success" disabled v-else>已选</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </el-dialog>
</template>

<script>
import { computed, ref, watch } from 'vue';
import GoodsService from '@/service/eks/goods'
export default {
  props: {
    goods: {
      type: Object,
      default: () => { },
      required: true
    },
    modelValue: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  emits: ['update:modelValue', 'update:goods'],

  setup(props, { emit }) {
    const visible = computed({
      get: () => props.modelValue,
      set: (val) => {
        emit('update:modelValue', val)
      }
    })
    watch(() => visible.value, (newVal, oldVal) => {
      if (newVal) {
        getAllGoods()
      }
    })

    const handleClose = (done) => {
      visible.value = false
      done()
    }

    const goodsName = ref('');
    const search = () => {

    }
    const goodsList = ref([]);
    const goodsList2 = computed(() => {
      return goodsList.value.filter((item) => {
        return item.goods_name?.includes(goodsName.value) || `${item.goods_id}`?.includes(goodsName.value)
      })
    });
    const getAllGoods = () => {
      GoodsService.getAllGoods({}).then((res) => {
        if (res.code === 'Success') {
          goodsList.value = res.data
        }
      })
    }

    const FnChoose = (row) => {
      emit('update:goods', row);
      visible.value = false
    }


    return {
      visible,
      handleClose,
      goodsName,
      search,
      goodsList,
      goodsList2,
      FnChoose
    }
  }
}

</script>

<style lang="scss" scoped>
</style>